マウスストーカーを作成する（2）
前回の講座に引き続き、今回もマウスストーカーの作成方法を解説します。今回は、マウスストーカーの動きを改良するテクニックの紹介です。なお、マウスストーカーの基本的な作成方法は前回の講座で解説しているので、そちらも合わせて参照するようにしてください。 サンプルページ

→ マウスポインタを1ピクセルずつ追従させる
 
画像がマウスポインタを追いかけるように見せるには、画像とマウスポインタの動きに時差を与える必要があります。そこで関数「ImageMove()」を以下のように改良しました。この例では、マウスポインタのX座標「mx」と画像のX座標「ix」を比較し、ix＜mxの場合は「ix」をプラス1、そうでない場合は「ix」をマイナス1だけ変化させます。同様にY座標も変化させると、画像は縦横ナナメに1ピクセルずつ動くようになります。これで両者の座標に時差が生じ、画像がマウスポインタを追いかけるようになります。
<SCRIPT type="text/javascript">
<!--
　 ：
　 ：
function ImageMove() {
if (ix<mx){ix++} else {ix--}
if (iy<my){iy++} else {iy--}
img1.style.left = ix + "px";
img1.style.top = iy + "px";
setTimeout("ImageMove()",10);
}
// -->
</SCRIPT> 		サンプルページ


→ もっとスムーズに画像を追従させる
 
先ほどの改良例は、画像の動きが遅くなるという欠点があります。また、画像の進行方向も縦・横・ナナメ45度に限定されてしまいす。そこで、もっとスムーズに画像を動かす方法を紹介しておきましょう。以下の例では、マウスポインタのX座標「mx」と画像のX座標「ix」について“その差の1 / 20”ずつ画像を動かしています。その結果、両者が遠い場合は速く、近い場合はゆっくりと画像が動きます。同様にY座標も変化させると、画像がスムーズにマウスポインタを追いかけるようになります。
<SCRIPT type="text/javascript">
<!--
　 ：
　 ：
function ImageMove() {
ix=ix+(mx-ix)/20;
iy=iy+(my-iy)/20;
img1.style.left = ix + "px";
img1.style.top = iy + "px";
setTimeout("ImageMove()",10);
}
// -->
</SCRIPT> 		サンプルページ


G�|�C���g�|�C���@Amazon Yahoo �y�V

�����z�[���y�[�W �y�V���o�C��[UNLIMIT��������1�~] �C�O�i���q���� �C�O���s�����������I